<template>
    <!-- 商品详情 -->
    <Hidden_top />
    <Tags />
    <div class="purorder">
        <div class="w">
            <div class="boxs">
                <div>
                    <div class="bigImg">
                        <el-image style="width: 100%;
                        height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                            :fit="cover" />
                    </div>
                    <div class="somImg">
                        <el-image class="imges"
                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :fit="cover" />
                        <el-image class="imges"
                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :fit="cover" />
                        <el-image class="imges"
                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :fit="cover" />
                        <el-image class="imges"
                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :fit="cover" />
                        <el-image class="imges"
                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :fit="cover" />
                    </div>
                </div>
                <div class="box_cnt">
                    <h3 style="margin-bottom: 10px;">宇成KHYD155煤矿用探水探瓦斯钻</h3>
                    <p
                        style="width: 802px; height: 58px; border-bottom: 1px solid #DCDFE5; font-size: 12px; color: #acacac;">
                        对防止切屑及其它尖锐东西的进入起着***防护作用，通过一定的结构措施及合适的刮屑板也可***降低冷却液的渗入。我们的钢制伸缩式导轨防护罩能够
                        适应现代机床对高科技、正确的安装位置、高运行速度等方面不断提高的要求。</p>

                    <div class="money">
                        价格：<span class="bargain">面议</span>
                    </div>
                    <!-- 表格 -->
                    <table border="1" style="border-collapse: collapse;">
                        <tr style="font-size: 12px;">
                            <td class="table_tb">商品特性&nbsp;&nbsp;</td>
                            <td style="width: 130px; height: 30px;">&nbsp;&nbsp;防护</td>
                            <td class="table_tb">型号&nbsp;&nbsp;</td>
                            <td style="width: 130px; height: 30px;">&nbsp;&nbsp;50</td>
                            <td class="table_tb">发货期限&nbsp;&nbsp;</td>
                            <td style="width: 130px; height: 30px;">&nbsp;&nbsp;3天内</td>
                        </tr>
                        <tr style="font-size: 12px;">
                            <td class="table_tb">样式&nbsp;&nbsp;</td>
                            <td style="width: 130px; height: 30px;">&nbsp;&nbsp;护板</td>
                            <td class="table_tb">护罩总宽度&nbsp;&nbsp;</td>
                            <td style="width: 130px; height: 30px;">&nbsp;&nbsp;500</td>
                            <td class="table_tb">供货总量&nbsp;&nbsp;</td>
                            <td style="width: 130px; height: 30px;">&nbsp;&nbsp;1000件</td>
                        </tr>
                        <tr style="font-size: 12px;">
                            <td class="table_tb">防护部位&nbsp;&nbsp;</td>
                            <td style="width: 130px; height: 30px;">&nbsp;&nbsp;导轨</td>
                            <td class="table_tb">品牌&nbsp;&nbsp;</td>
                            <td style="width: 130px; height: 30px;">&nbsp;&nbsp;鑫姆迪克</td>
                            <td class="table_tb">发货地址&nbsp;&nbsp;</td>
                            <td style="width: 130px; height: 30px;">&nbsp;&nbsp;山东 庆云县</td>
                        </tr>

                    </table>
                    <div class="individual">
                        <div class="individual_left">
                            <div class="individual_name">
                                <img width="42px" height="42px" src="@/assets/img/header/dh.png" alt="">
                                <div class="individual_xx">
                                    <div>王女士<span style="font-size: 12px; margin-left: 5px; color: #ACACAC;">经理</span></div>
                                    <div><span style="font-size: 22px; color: #2270D7;">158 5557 3332</span> <span
                                            style="margin-left: 20px; font-size: 22px; color: #2270D7;">4000-4977960</span>
                                    </div>
                                </div>
                            </div>
                            <div class="individual_wx">添加微信</div>
                        </div>
                        <div class="individual_right">
                            <el-image style="width: 100%; height: 100%" src="" :fit="cover" />
                        </div>
                    </div>

                    <div class="inquiry">
                        <div></div>
                        <el-button color="#2270D7" type="primary" @click="consultancy">立即咨询</el-button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import Hidden_top from '@/components/hidden_top/index.vue';
import Tags from '@/components/tags/index.vue';

const consultancy = () => {
    
}
</script>

<style lang="scss" scoped>
.purorder {
    height: 28.75vw;
}

.w {
    width: 75vw;
    margin: 0 auto;
}

.boxs {
    margin-top: 20px;
    display: flex;

    .box_cnt {
        margin-left: 30px;

        .money {
            height: 3.2vw;
            padding-top: 30px;

            .bargain {
                font-size: 30px;
                font-weight: 700;
                color: #D90424;
            }
        }

        .table_tb {
            width: 138px;
            height: 30px;
            text-align: right;
            background-color: #F8F8F8;
            color: #ACACAC;
        }

        .individual {
            display: flex;
            justify-content: space-between;
            width: 810px;
            height: 83px;
            background-color: #F6F6F6;
            margin-top: 20px;
            margin-bottom: 30px;

            .individual_left {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 727px;
                padding-left: 20px;

                .individual_name {
                    display: flex;
                    align-items: center;
                    padding-left: 20px;

                    .individual_xx {
                        margin-left: 10px;
                    }
                }

                .individual_wx {
                    width: 14px;
                    height: 75px;
                    padding-right: 8px;
                    font-size: 14px;
                }
            }

            .individual_right {
                width: 77px;
                height: 77px;
                background-color: #D90424;
                padding: 3px;
            }
        }

        .inquiry{
            display: flex; 
            justify-content: space-between;
            .el-button{
                width: 115px;
                height: 40px;
            }
        }
    }



    .bigImg {
        width: 350px;
        height: 350px;
        background-color: aqua;

    }

    .somImg {
        margin-top: 10px;
        height: 60px;

        .imges {
            width: 60px;
            height: 60px;
            margin-right: 12px;

            &:last-child {
                margin-right: 0;
            }
        }




    }
}</style>